@import 'reset.scss';//引入rest.scss文件,这里可以省略这个.scss后缀
@import 'header.scss';//头部
@import 'footer.scss';//脚部

body{
    width: 1200px;
    margin: 0 auto;
}
/*轮播图*/
.swiper-container{
    width: 1200px;
    height: 540px;
}

/*立即充值*/
#Recharge{
    width: 1200px;
    margin: 40px auto 0;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    div{
        height: 60px;
        /*立即充值和获奖名单*/
        a{
            display: block;
            height: 100%;
            width: 100%;
        }
        &:nth-child(2){
            width: 780px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            // background-color: pink;
        }
        &:nth-child(3){
            width: 335px;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 100;
            // background-color: rgb(214, 224, 64);
        }
    }
}

/*限时秒杀*/
#Seckill{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    div{
        height: 64px;
        width: 402px;
        line-height: 64px;
        position: absolute;
        top: 0;
        right: 0;
        span{
            z-index: 100;
            display: block;
            position: absolute;
            &:nth-child(1){
                color: #ffffff;
                left: 0;
            }
            &:nth-child(2){
                width: 44px;
                left: 206px;
                color: black;
            }
            &:nth-child(3){
                width: 44px;
                left: 268px;
                color: black;
            }
            &:nth-child(4){
                width: 44px;
                left: 330px;
                color: black;
            }
        }
    }
}

/*秒杀商品*/
#SeckillProducts{
    width: 1200px;
    font-size: 16px;
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    a{
        width: 230px;
        margin-top: 20px;
        img{
            width: 100%;
        }
        span{
            color: #474747;
            &:nth-of-type(2){//他与E:nth-chile(n)的区别,chile把其他元素也计算了进来,而of-type是特定元素
                color: #e0d6d3;
                text-decoration: line-through;
            }
            &:nth-of-type(3){
                color: red;    
            }
            &:nth-of-type(4){
                float: right;
                span{
                    color: #bb2b34;
                    font-size: 20px;
                }
            }
            }
    }
}

/*情人节精选*/
#Lover{
    text-align: center;
    img{
        margin: 28px auto 20px;
    }
    div{
        width: 1200px;
        margin: 0 auto;
        background-color: red;
        display: flex;
        justify-content: center;
        img{
            margin: 0;
        }
    }
}

/*推荐商品*/
#commodity{
    margin-top: 20px;
    // background-color: red;
    text-align: center;
    div{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            a{
                margin-top: 20px;
            }
        &:nth-of-type(1){
            a{
                width: 400px;
            }
        }
        &:nth-of-type(2),&:nth-of-type(3){
            a{
                width: 300px;
            }
        }
    }
}


/*优质推荐*/
#Recommend{
    overflow: hidden;//高度塌陷
    #ex{
        color: #9a9a9a;
        font-size: 18px;
        line-height: 100px;
        text-align: center;
    }
    ul{
        width: 1200px;
        margin: 0 auto;
        li{
            float: left;
            a{
                display: block;
                border: 1px solid #e8e7ec;
                p{
                    height: 70px;
                    line-height: 70px;
                    color: #9a9a9a;
                    span{
                        float: right;
                        color: red;
                    }
                }
            }
        }
        li:nth-of-type(2){
            margin: 0 10px;
        }
    }
}


/*下装推荐*/
#Bottling{
    text-align: center;
    p{
        line-height: 100px;
        color: #9a9a9a;
        font-size: 18px;
    }
    div{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    li{
        border:1px solid #e8e7ec;
        p{
            height: 66px;
            line-height: 66px;
            font-size: 14px;
            span{
                &:nth-of-type(1){
                    float: left;
                }
                &:nth-of-type(2){
                    float: right;
                    color: red;
                }
            }
        }
    }
}


/*更多精品*/
#More{
    text-align: center;
    p{
        line-height: 100px;
        color: #9a9a9a;
        font-size: 18px;
    }
    div{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
}